<template>
  <el-container class="body" v-title :data-title="$t('home.title')">
    <el-header>
      <toggle-language></toggle-language>
      <!-- <img src="" alt="" /> -->
      <div class="myTitle">
        <div class="headerText">
          <img
            style="
              width: 30px;
              height: 30px;
              padding: 0px;
              margin: 0px;
              vertical-align: middle;
            "
            src="../assets/images/logo.svg"
            alt=""
          />{{ "&nbsp;" + $t("home.title") }}
        </div>
      </div>
      <div>
        <el-button
          type="info"
          icon="el-icon-switch-button"
          size="mini"
          :title="$t('home.exit')"
          @click="logout"
        ></el-button>
      </div>
    </el-header>
    <el-container class="main">
      <el-aside width="200px">
        <!-- 展开和关闭二级菜单事件 -->
        <!-- @open="handleOpen"
        @close="handleClose" -->
        <el-menu
          :default-active="activeIndex"
          class="el-menu-vertical-demo"
          background-color="#57606f"
          text-color="#d1d1d1"
          active-text-color="#f56c6c"
          router
        >
          <div :key="item.id" v-for="item in $t('home.menuList')">
            <el-submenu :index="item.id + ''" v-if="powerHandler(item)">
              <template slot="title">
                <i :class="item.icon"></i>
                <span>{{ item.name }}</span>
              </template>
              <!-- <el-menu-item-group> -->
              <el-menu-item
                :key="items.id"
                v-for="items in item.children"
                :index="items.path"
              >
                {{ items.name }}
              </el-menu-item>
              <!-- </el-menu-item-group> -->
            </el-submenu>
            <el-menu-item v-else-if="powerHandler2(item)" :index="item.path">
              <i :class="item.icon"></i>{{ item.name }}
            </el-menu-item>
          </div>
        </el-menu>
      </el-aside>
      <el-container class="content">
        <!-- @scroll.native="gundong" -->
        <el-main>
          <router-view></router-view>
        </el-main>
        <el-footer>
          <div class="info">
            <div>{{ $t("home.duty") + " : " + watch.name }}</div>
            <div>{{ $t("home.contact") + " : " + phone }}</div>
          </div>
          <!-- <BannerText :lists="bannerText"></BannerText> -->
        </el-footer>
      </el-container>
    </el-container>
  </el-container>
</template>

<script>
import BannerText from "../components/BannerText.vue";
import ToggleLanguage from "../components/ToggleLanguage.vue";
import TableCard from "../components/TableCard.vue";

export default {
  components: {
    BannerText,
    ToggleLanguage,
    TableCard,
  },
  mounted() {
    // 获取到登录角色信息
    this.power = JSON.parse(window.sessionStorage.getItem("user"));
    // console.log(this.power);
  },
  created() {
    this.duty();
    // console.log(this.$t("home.menuList"));
    // console.log(JSON.parse(window.sessionStorage.getItem("user")));
  },
  // 监听路由变化
  // watch: {
  //   $route(to, from) {
  //     console.log(to.path);
  //     if (to.path != "/Macro") {
  //     }
  //   },
  // },
  data() {
    return {
      queryInfo: {
        page: 1,
        pagesize: 1,
        query_text: "",
      },
      bgcColor: "#87ceeb",
      activeTextColor: "#ff7f50",
      activeIndex: this.$route.path,
      bannerText: ["警告：CPU使用率100%"],
      power: 1,
      watch: { name: "        " },
      phone: "",
    };
  },
  methods: {
    // gundong() {
    //   console.log(123);
    // },
    // 当前时间值班人信息获取
    async duty() {
      const { data: res } = await this.$http.get("/business/duty/list", {
        params: this.queryInfo,
      });
      let dutyTime = res.all_duty.find((val) => {
        return this.$jutils.isDuringDate(val.start_time, val.end_time);
      });
      if (dutyTime != undefined) {
        this.watch = res.staff_data.find((vals) => {
          return vals.id == dutyTime.name_id;
        });
        const { data: result } = await this.$http.get("/str/decrypt", {
          params: { str: this.watch.phone_number },
        });
        this.phone = result.str;
      } else {
        this.watch = { name: "" };
      }
    },
    // 退出登录
    logout() {
      this.$alert("你即将退出登录，请确认！", "退出登录？", {
        showCancelButton: true,
        confirmButtonText: "Yes",
        cancelButtonText: "No",
        callback: (action) => {
          console.log(action);
          if (action != "confirm") return;

          window.sessionStorage.removeItem("token");
          window.sessionStorage.removeItem("user");
          this.$router.push("/login");
        },
      });
    },
    // 根据权限  匹配对应的菜单列表
    // 1是管理员 2是开发人员  3是运维人员
    // 二级菜单验证
    powerHandler(item) {
      console.log(item);
      if (this.power.type == 1) {
        if (item.children) {
          return true;
        }
      } else if (this.power.type == 2 || this.power.type == 3) {
        if (item.children) {
          if (item.id == 6) {
            return false;
          } else {
            return true;
          }
        }
      }
    },
    // 一级菜单验证
    powerHandler2(item) {
      if (this.power.type == 1) {
        return true;
      } else if (this.power.type == 2 || this.power.type == 3) {
        if (item.id == 6) {
          return false;
        } else {
          return true;
        }
      }
    },
  },
};
</script>

<style lang="less" scoped>
.body {
  height: 100%;
  // border: 1px solid red;
  .el-header {
    position: relative;
    display: flex;
    height: 45px !important;
    background-color: #2f3542;
    justify-content: space-between;
    .myTitle {
      // display: flex;
      .headerText {
        height: 45px;
        line-height: 45px;
        font-size: 22px;
        font-weight: 700;
        color: #d1d1d1;
      }
    }

    .el-button {
      margin-top: 8px;
    }
  }
  .main {
    height: calc(100% - 45px);
    .el-aside {
      height: 100%;
      color: #d1d1d1;
      background-color: #57606f;
      &::-webkit-scrollbar {
        display: none;
      }
      .el-menu {
        // 解决展开过多子菜单后 整体页面会超过屏幕高度问题
        height: 1px;
        border-right-width: 0 !important; // 解决导航菜单右边1px突出问题
      }
    }
    .content {
      .el-main {
        background-color: #fef8ef;
        padding: 10px;
        padding-top: 16px;
        // border: 2px solid red;
      }
      .el-footer {
        height: 50px !important;
        display: flex;
        background-color: #2f3542;
        .info {
          display: flex;
          // background-color: aqua;
          padding-top: 15px;
          // padding-right: 10px;
          width: 100%;
          color: #d1d1d1;
          // margin: 10px;
          overflow: hidden;
          div {
            min-width: 110px;
            margin: 0 30px 0 0;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }
      }
    }
  }
}
</style>